<!DOCTYPE html>
<html>
<head>
	<title>{{ .item.Title }}</title>
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/public/css/style.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
	<div class="container">
		<header class="navbar">
			<section class="navbar-section">
				<a href="/" class="navbar-brand mr-2">Home</a>
				<a href="/hot" class="btn btn-link">Hot</a>
				<a href="/new" class="btn btn-link">New</a>
			</section>
			<section class="navbar-section">
				<form method="GET" action="/">
					<div class="input-group input-inline">
						<input class="form-input" type="text" placeholder="search" name="keywords">
						<button type="submit" class="btn btn-primary input-group-btn"><i class="fa fa-search"></i></button>
					</div>
				</form>
			</section>
		</header>
	</div>
	
	
	<div class="container">
		<h5>Resources List</h5>
		
		<div>
			{{ range .rows }}
			<div class="tile tile-centered bg-gray">
				<div class="tile-icon">
					<div class="example-tile-icon centered">
						{{ if eq .MimeType ".mp4"}}
						<i class="fa fa-file-video-o centered"></i>
						{{ else }}
						<i class="fa fa-file-photo-o centered"></i>
						{{ end }}
					</div>
				</div>
				<div class="tile-content">
					<div class="tile-title">
						{{ if .IsPreview }}
						<a href="/detail?id={{ .Id }}">{{  .Title }}</a>
						{{ else }}
						<a href="/item?id={{ .Id }}">{{  .Title }}</a>
						{{ end }}
					</div>
					<small class="tile-subtitle text-gray"><i class="fa fa-eye"></i> {{ .Views }} · {{ .Size }} Mb · {{ .ModAt }}</small>
				</div>
				<div class="tile-action">
					<div class="dropdown">
						<a  class="btn btn-link dropdown-toggle" tabindex="0">
							<i class="fa fa-ellipsis-v"></i>
						</a>
						<!-- menu component -->
						<ul class="menu">
							<li class="menu-item">
								<a href="#">
									<i class="icon icon-link"></i> Report
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			{{ end}}
		</div>
		
		<ul class="pagination">
			<li class="page-item page-prev {{ if eq .hasPre false }} disabled {{ end }}">
				<a href='/?page={{ .prePage }}{{ if ne .keywords ""}}&keywords={{ .keywords }}{{ end }}'>
					<div class="page-item-title h5"><i class="fa fa-angle-left"></i> Prev</div>
				</a>
			</li>
			<li class="page-item page-next {{ if eq .hasNext false }} disabled {{ end }}">
				<a href='/?page={{ .nextPage }}{{ if ne .keywords ""}}&keywords={{ .keywords }}{{ end }}'>
					<div class="page-item-title h5">Next <i class="fa fa-angle-right"></i></div>
				</a>
			</li>
		</ul>

	</div>
</body>
</html>